<template>
  <a-modal
    title=""
    width="90%"
    :visible="modelVisible"
    v-if="modelVisible"
    @ok="postSelectOutgoing"
    @cancel="close"
    class="selectOutgoingModal"
    :okButtonProps="{ size: 'small' }"
    :cancelButtonProps="{ size: 'small' }"
  >
    <a-radio-group
      size="small"
      v-model:value="outgoingRadioIndex"
      @change="changeRadio"
    >
      <a-radio-button :value="1">关联外发打样</a-radio-button>
      <a-radio-button :value="2">无需外发打样</a-radio-button>
    </a-radio-group>
    <div v-if="outgoingRadioIndex === 1">
      <h5 class="my-10px">选择外发打样单</h5>
      <cps-vxe-table
        :row-config="{
          useKey: true,
          keyField: 'id'
        }"
        ref="tableRef"
        menuName="outProofingOem"
        :apiParams="{ isPLM: 1, isCpCard: false, cp: [cp] }"
        showSetting
        interfaceURL="/proc-out-proof/page"
        @change="changeTable"
      >
      </cps-vxe-table>
    </div>
    <div class="flex justify-center p-10px" v-else>
      <div class="w-400px">
        <cps-form
          :labelCol="{ span: 8 }"
          :wrapperCol="{ span: 16 }"
          :model="outgoingForm"
          :rules="rules"
          ref="outgoingFormRef"
        >
          <cps-form-item :span="24" label="供应商" name="supplierId">
            <cps-select
              size="small"
              v-model:value="outgoingForm.supplierId"
              url="/doc/list-supplier"
              label="supplierName"
              labelValue="id"
              class="w-full"
              immediate
              showSearch
            ></cps-select>
          </cps-form-item>
          <cps-form-item :span="24" label="报价周期" name="date">
            <a-range-picker
              size="small"
              allowClear
              class="w-full"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              v-model:value="outgoingForm.date"
              :placeholder="['开始日期', '结束日期']"
            />
          </cps-form-item>
          <cps-form-item :span="24" label="数量">
            <a-input-number
              placeholer="请输入"
              size="small"
              class="w-full"
              v-model:value="outgoingForm.number"
              :min="0"
            ></a-input-number>
          </cps-form-item>
        </cps-form>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { reactive, toRefs, ref, onMounted, computed } from 'vue'
import { proc_out_proof_manualQuote_post } from 'server/modules/5712.js'
import { proc_out_proof_noOutProofingQuote_post } from '@/server/modules/15100.js'
import { message } from 'ant-design-vue'
import moment from 'moment'
export default {
  props: {
    cp: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const outgoingFormRef = ref(null)
    const state = reactive({
      outgoingFormRef,
      // showSelectOutgoing: false,
      selectedRowKeys: [],
      outgoingRadioIndex: 1,
      outgoingForm: {
        supplierId: '',
        quoteCycle: '',
        date: []
      },
      rules: {
        supplierId: [
          {
            required: true,
            message: '请选择供应商',
            trigger: 'blur',
            type: 'number'
          }
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'blur',
            type: 'array'
          }
        ]
      }
    })
    onMounted(() => {
      state.outgoingRadioIndex = 1
      state.outgoingForm = {}
    })
    const modelVisible = computed(() => props.visible)
    const methods = {
      close() {
        emit('close')
      },
      refresh() {
        emit('refresh')
      },
      async postSelectOutgoing() {
        if (state.outgoingRadioIndex === 1) {
          const { success, retInfo } = await proc_out_proof_manualQuote_post({
            ids: state.selectedRowKeys,
            quoteType: 1
          })
          if (success) {
            message.success(retInfo)
            methods.close()
            methods.refresh()
          } else {
            message.error(retInfo)
          }
        } else {
          outgoingFormRef.value?.validate().then(async () => {
            const params = {
              quoteType: 2,
              beginDate: state.outgoingForm.date[0],
              endDate: state.outgoingForm.date[1],
              num: state.outgoingForm.number,
              supplierId: state.outgoingForm.supplierId,
              cp: props.cp
            }
            const { success, retInfo } =
              await proc_out_proof_noOutProofingQuote_post(params)
            if (success) {
              message.success(retInfo)
              methods.close()
              methods.refresh()
            } else {
              message.error(retInfo)
            }
          })
        }
      },
      changeRadio() {
        if (state.outgoingRadioIndex === 2) {
          const currentDate = moment().format('YYYY-MM-DD')
          const nextDate = moment().add(1, 'days').format('YYYY-MM-DD')
          state.outgoingForm.date = [currentDate, nextDate]
        }
      },
      changeTable(selectedRowKeys) {
        state.selectedRowKeys = selectedRowKeys
      }
    }
    return {
      ...toRefs(state),
      ...methods,
      modelVisible
    }
  }
}
</script>
<style lang="scss" scoped></style>
